<template>
  <view class="wrap">
    <text class="title">{{ questionnaireName }}</text>
    <view class="desc">
      <image
        class="shield"
        src="https://ainengli.meilianshuke.com/jkhx/common/shield.png"
        mode="scaleToFill"
      />
      <text class="text">专业测评量表</text>
    </view>
    <view class="content">
      <view class="top">
        <text class="page">第{{ current }}题/共{{ total }}题</text>
        <text class="top-desc">请根据实际情况，选择最符合的一项</text>
      </view>
      <view class="question" v-if="questionnaireList.length > 0 && questionnaireList[current - 1]">
        <text class="questionName">{{ questionnaireList[current - 1].questionName }}</text>

        <view
          @tap="selectItem(item)"
          :class="['options-item', item.value == questionnaireList[current - 1].value ? 'on' : '']"
          v-for="(item, index) in questionnaireList[current - 1].options"
          :key="index"
        >
          <text>{{ item.label }}</text>
        </view>
      </view>
    </view>
    <!-- <view class="btn-box">
      <view class="btn-grid">
        <text @tap="preHandle" class="btn-item" v-if="current > 1">上一题</text>
      </view>
      <view class="btn-grid">
        <text @tap="saveHandle" class="btn-item save-btn" v-if="current === total"> 提交问卷 </text>
        <text
          @tap="nextHandle"
          class="btn-item save-btn"
          v-if="
            current < total &&
            questionnaireList[current - 1] &&
            questionnaireList[current - 1].value
          "
        >
          下一题
        </text>
      </view>
    </view> -->
    <view class="bottom">
      <view @tap="preHandle" :class="['prev', current > 1 ? '' : 'hidden']">上一题</view>
      <view
        v-if="
          current < total && questionnaireList[current - 1] && questionnaireList[current - 1].value
        "
        @tap="nextHandle"
        class="next"
        >下一题</view
      >
      <view
        v-if="
          current === total &&
          questionnaireList[current - 1] &&
          questionnaireList[current - 1].value
        "
        @tap="saveHandle"
        class="next"
        >提交问卷</view
      >
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getQuestionnaireContent, saveQuestionnaire } from '../sleep.api'
import { reactive, ref } from 'vue'
import type { QuestionnaireContent, optionsData } from './sleepAssessmentModel'

import { throttle } from '@/utils/tools'

const current = ref(1)
const total = ref(1)

const questionnaireList = ref<QuestionnaireContent[]>([])
const questionnaireName = ref<string>('')

const originalData = ref()

const userInfo = ref({
  empi: '',
  userId: ''
})

const questionnaireType = ref<number>(4)

onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : {}
})

onLoad((options) => {
  if (options && options.type) {
    questionnaireType.value = options.type
    getContentData(options.type)
  }
})

const getContentData = (code: string) => {
  getQuestionnaireContent(code).then((res: any) => {
    const content = JSON.parse(res.data.content)
    originalData.value = res.data
    if (content && content.length > 0) {
      questionnaireList.value = content[0].list
      questionnaireName.value = content[0].name

      total.value = questionnaireList.value.length
    }
  })
}

const selectItem = throttle((item: optionsData) => {
  questionnaireList.value[current.value - 1].value = item.value

  if (current.value < total.value) {
    setTimeout(() => {
      current.value = current.value + 1
    }, 500)
  }
}, 500)

const preHandle = () => {
  current.value = current.value - 1
}

const nextHandle = () => {
  current.value = current.value + 1
}
const saveHandle = () => {
  const allValid = questionnaireList.value.every((item) => {
    if (item.value === '') {
      uni.showToast({
        title: '请完成【' + item.questionName + '】题目选择',
        icon: 'none'
      })
      return false
    }
    return true
  })
  if (!allValid) {
    return
  } else {
    const data = questionnaireList.value.map((vo) => {
      return {
        userId: userInfo.value.userId,
        empi: userInfo.value.patientInfo.empi
          ? userInfo.value.patientInfo.empi
          : userInfo.value.empi,
        questionnaireId: originalData.value.questionnaireId,
        questionId: vo.id,
        option: vo.options.filter((item) => vo.value === item.value)[0].id,
        content: vo.options.filter((item) => vo.value === item.value)[0].value,
        extContent: '',
        score: vo.options.filter((item) => vo.value === item.value)[0].score
      }
    })

    uni.showLoading({
      title: '提交中...'
    })
    saveQuestionnaire({
      clientId: questionnaireType.value,
      patientQuestionnaireAnswerVOs: data
    }).then((res: any) => {
      uni.hideLoading()
      if (res.data) {
        uni.redirectTo({
          url: `/module/src/pages/sleep/sleepAssessment/result?type=${questionnaireType.value}&questionnaireId=${res.data}`
        })
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 48rpx 32rpx;
}

.title {
  font-size: 48rpx;
  font-weight: 700;
  color: #222;
}

.desc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 258rpx;
  height: 48rpx;
  margin-top: 24rpx;
  margin-bottom: 48rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #fff;
  background: #00d1b6;
  border: 1rpx solid #00d1b6;
  border-radius: 24rpx;

  .shield {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }

  .text {
    display: inline-block;
    line-height: 48rpx;
  }
}

.content {
  width: 100%;
  padding: 32rpx 32rpx 12rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.top {
  width: 100%;
  height: 100rpx;

  .page {
    display: block;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    font-weight: 700;
    line-height: 40rpx;
    color: #222;
  }

  .top-desc {
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
  }
}

.question {
  margin: 32rpx 0 0;

  .questionName {
    display: block;
    margin-bottom: 32rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #222;
  }

  .on {
    font-weight: 700;
    color: #00d1b6;
    background: rgb(0 209 182 / 5%);
    border: 1rpx solid #00d1b6;
  }
}

.options-item {
  width: 100%;
  padding: 24rpx 0 22rpx 30rpx;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #222;
  background-color: #fafafa;
  border-radius: 8rpx;
}

// .btn-box {
//   display: flex;
//   flex-direction: row;
//   align-items: center;
//   justify-content: space-between;
//   height: 90rpx;
//   margin-top: 32rpx;

//   .btn-grid {
//     width: 331rpx;
//     height: 88rpx;
//   }

//   .btn-item {
//     display: block;
//     font-size: 32rpx;
//     font-weight: 700;
//     line-height: 88rpx;
//     color: #00d1b6;
//     text-align: center;
//     border: 1rpx solid #00d1b6;
//     border-radius: 44rpx;
//     transform: rotateZ(360deg); // 解决IOS下border缺失问题
//   }

//   .save-btn {
//     margin-left: 24rpx;
//     color: #fff;
//     background: #00d1b6;
//   }
// }
.bottom {
  display: flex;
  gap: 26rpx;
  justify-content: space-between;
  margin: 32rpx;
  font-size: 32rpx;
  font-weight: 700;

  .prev,
  .next {
    width: 48%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
  }

  .prev {
    color: #00d1b6;
    border: 1rpx solid #00d1b6;
  }

  .next {
    color: #fff;
    background: #00d1b6;
  }

  .hidden {
    visibility: hidden;
  }
}
</style>
